---
name: useDynamicList
route: /useDynamicList
menu: 'UI'
edit: false
sidebar: true
---

import { Playground } from 'docz';
import JackBox from 'jackbox';

import { useState, useMemo } from 'react';
import Demo1 from './demo/demo1';
import Demo1Tsx from '!raw-loader!./demo/demo1.tsx';
import Demo1Jsx from '!raw-loader!./demo/demo1.jsx';

import Demo2 from './demo/demo2';
import Demo2Tsx from '!raw-loader!./demo/demo2.tsx';
import Demo2Jsx from '!raw-loader!./demo/demo2.jsx';

import Demo3 from './demo/demo3';
import Demo3Tsx from '!raw-loader!./demo/demo3.tsx';
import Demo3Jsx from '!raw-loader!./demo/demo3.jsx';


# useDynamicList

一个帮助你管理列表状态，并能生成唯一 key 的 Hook。

## 代码演示

### 动态列表

<JackBox tsCode={Demo1Tsx} jsCode={Demo1Jsx} demoName='动态列表' description='可增删的不定条数表单'>
  <Demo1 />
</JackBox>

### 连环嵌套

<JackBox tsCode={Demo2Tsx} jsCode={Demo2Jsx} demoName='嵌套表单' description='动态表单内部嵌套动态表单'>
  <Demo2 />
</JackBox>

### 动态表格(可拖拽)

<JackBox tsCode={Demo3Tsx} jsCode={Demo3Jsx} demoName='动态表格(可拖拽)' description='使用 antd table 构建动态表格'>
  <Demo3 />
</JackBox>

## API

```typescript
const result: Result = useDynamicList(initialValue: T[]);
```

### Result

| 参数         | 说明         | 类型                 |  备注            |
|--------------|--------------|----------------------|---------------|
| list      | 当前的列表 | T[]              | - |
| resetList  | 重新设置 list 的值     | (list: T[]) => void;          | - |
| insert        | 在指定位置插入元素 | (index: number, obj: T) => void                | - |
| merge         | 在指定位置插入多个元素 | (index: number, obj: T) => void | - |
| replace          | 替换指定元素         | (index: number, obj: T) => void          | - |
| remove   | 删除指定元素     | (index: number) => void;          | - |
| move | 移动元素     | (oldIndex: number, newIndex: number) => void;          | - |
| getKey  | 获得某个元素的 uuid     | (index: number) => number;           | - |
| getIndex  | 获得某个key的 index     | (key: number) => number;           | - |
| sortForm  | 根据表单结果自动排序     | (list: unknown[]) => unknown[];           | 使用方法详见[`动态表格(可拖拽)`](#动态表格可拖拽) |
| push  | 在列表末尾添加元素     | (obj: T) => void;          | - |
| pop  | 移除末尾元素     | () => void;          | - |
| unshift  | 在列表起始位置添加元素    | (obj: T) => void;          | - |
| shift  | 移除起始位置元素     | () => void;          | - |

### 参数

| 参数         | 说明         | 类型                 |   |
|--------------|--------------|----------------------|---|
| initialValue      | 列表的初始值 | T[]              |   |